import { useRef, useState } from 'react';
import { Button, Row, Col, Input, Popconfirm } from 'antd';
import { PlusOutlined, EditTwoTone, DeleteFilled } from '@ant-design/icons';
const { Search } = Input
import {
    EditableProTable
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from "umi";
import CompetitionQuestionOperatePanel from './CompetitionQuestionOperatePanel';
import { ROW_ID_KEY, OPERATE_ADD,OPERATE_EDIT  } from '@/constants';
import { paginationQuery } from '@/services/competitionQuestion';
import EnabledStatusEnum from '@/components/Enum/EnabledStatusEnum';
import CompQuesStatusEnum from '@/components/Enum/CompQuesStatusEnum';
const PaginationQueryCompetitionQuestionTable = ({ data }) => {
    const intl = useIntl();
    const [showPanel, setShowPanel] = useState(false);
    const [formData, setFormData] = useState()
    const [operateType, setOperateType] = useState()
    const [selectLoading, setSelectLoading] = useState(true);
    const [context, setContext] = useState(); //模糊搜索关键词
    const [paginationData, setPaginationData] = useState({ 'current': 1, 'pageSize': 10, 'total': 0 });
    const [editableKeys, setEditableRowKeys] = useState([]);
    const ref = useRef();
    async function getData(params) {
        params.context = context
        let res = await paginationQuery(params);
        if (res.success) {
            let resData = {
                ...res?.data,
                data: res?.data?.records
            }
            setContext()
            return resData
        }
    };
    let openPanel = (operateType, data, e) => {
        if (operateType === OPERATE_ADD) {
            setFormData()
        }else if (operateType === OPERATE_EDIT) {
            setFormData(data)
        }
        setShowPanel(true);
        setOperateType(operateType);
    };
    let closePanel = () => {
        setShowPanel(false)
        ref.current.reload();
    }
    let onSearch = (value) => {
        setContext(value)
        ref.current.reload();
    };
    const onEdit=(record)=>{
        openPanel(OPERATE_EDIT,record)
      }
    //TODO 将其抽离成一个外部方法
    let onPaginationChange = (current, pageSize) => {
        setPaginationData({ ...paginationData, current, pageSize })
        getData({ context: context, current, current, pageSize, pageSize })
    }
    // columns
    const columns = [
        {
            title: '名称',
            dataIndex: 'name',
            ellipsis: true,
            width: 100,
            editable: false,
        },
        {
            title: '描述',
            dataIndex: 'description',
            hideInSearch: true,
            editable: false,
        },
        {
            title: '状态',
            dataIndex: 'statusFlag',
            hideInSearch: true,
            editable: false,
            render: (_, record) => {
                return CompQuesStatusEnum(record.statusFlag)
            }
        },
        {
            title: '是否自动生成Flag',
            dataIndex: 'autoFlag',
            hideInSearch: true,
            editable: false,
            render: (_, record) => {
                return EnabledStatusEnum(record.autoFlag)
            }
        },
        {
            title: '文件名',
            dataIndex: 'fileName',
            hideInSearch: true,
            editable: false,
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            valueType: 'dateTime',
            hideInSearch: true,
        },
        {
            title: '创建人',
            dataIndex: 'createBy',
            hideInSearch: true,
        },
        {
            title: '最后更新时间',
            dataIndex: 'updateTime',
            valueType: 'dateTime',
            hideInSearch: true,
            editable: false,
        },
        {
            title: '更新人',
            dataIndex: 'updateBy',
            hideInSearch: true,
            editable: false,
        },
        {
            title: '操作',
            valueType: 'option',
            hideInSearch: true,
            width: 150,
            dataIndex: { ROW_ID_KEY },
            render: (text, record, _, action) => [
                <Button type="text" key={'edit'} shape="circle" size='small' onClick={()=>{onEdit(record)}} icon={<EditTwoTone />}/>,
                <Popconfirm
                    key={'delete'}
                    title={intl.formatMessage({
                        id: 'pages.Popconfirm.title',
                        defaultMessage: '确认删除'
                    })}
                    toolBar
                    description={intl.formatMessage({
                        id: 'pages.Popconfirm.description',
                        defaultMessage: '是否删除该条记录？'
                    })}
                    onConfirm={() => { onDelete(record) }}
                    okText={intl.formatMessage({
                        id: 'pages.Popconfirm.okText',
                        defaultMessage: '确认'
                    })}
                    cancelText={intl.formatMessage({
                        id: 'pages.Popconfirm.cancelText',
                        defaultMessage: '取消'
                    })}>
                    <Button type="text" danger shape="circle" size='small' icon={<DeleteFilled />} />
                </Popconfirm>,

            ],
        },
    ];
    return (
        <>
            {showPanel && <CompetitionQuestionOperatePanel operateType={operateType} record={formData} closePanel={closePanel} />}
            <EditableProTable
                actionRef={ref}
                search={false}
                options={{ fullScreen: false, reload: true, density: true, setting: true }}
                columns={columns}
                request={async (params = {}) => getData(params)
                }
                recordCreatorProps={false}
                pagination={{
                    pageSize: paginationData.pageSize,
                    total: paginationData.total,
                    current: paginationData.current,
                    showSizeChanger: true,
                    onChange: onPaginationChange
                }}
                rowKey={ROW_ID_KEY}
                dateFormatter="string"
                headerTitle='赛题管理'
                toolBarRender={() => [
                    <>
                        <Row align='middle' justify='space-between' style={{ width: '400px' }}>
                            <Col span={19}>
                                <Search
                                    style={{ width: '290px' }}
                                    placeholder="请输入赛题名称或描述关键词"
                                    onSearch={onSearch}
                                />
                            </Col>
                            <Col span={5}>
                                <Button key="3" type="primary" onClick={() => { openPanel(OPERATE_ADD) }}>
                                    <PlusOutlined />
                                    <FormattedMessage id='component.button.add' />
                                </Button>
                            </Col>
                        </Row>

                    </>
                ]}

                editable={{
                    type: 'multiple',
                    editableKeys,
                    onSave: async (rowKey, data, row) => {
                        onEdit(rowKey, data, row)
                    },
                    onDelete: async (rowKey, data, row) => {
                        onDelete(data)
                    },
                    onChange: setEditableRowKeys,
                }}
            ></EditableProTable>
        </>
    );
};
export default PaginationQueryCompetitionQuestionTable;